<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档对象模型节点属性(Document Object Model Node Attributes)</title>
  <!-- 
  在JavaScript中，文档对象模型（DOM）中的节点属性是指与DOM节点相关联的特性和信息。节点可以是元素节点、文本节点或其他类型的节点。
  一、节点类型
    DOM中的节点主要有以下几种类型：
    1. 元素节点（Element Node）：代表HTML标签，例如 `<div>` 、 `<p>` 等。
    2. 文本节点（Text Node）：代表元素中的文本内容。
    3. 属性节点（Attribute Node）：代表元素的属性，例如 `class` 、 `id` 等（在DOM Level 3中，属性节点通常通过元素节点的属性访问，而不是单独的节点）。

  二、访问节点属性
  1. 访问元素的属性：
    - 可以通过元素节点的 `attributes` 属性获取所有属性的集合（NamedNodeMap），也可以直接通过点语法或方括号语法访问特定属性。
    const element = document.getElementById('myElement');
    // 访问特定属性
    const className = element.className; // 使用点语法
    const id = element.getAttribute('id'); // 使用getAttribute方法
  2. 获取所有属性：
    - 使用 `attributes` 属性可以获取元素的所有属性，返回一个 `NamedNodeMap` 对象。
    const attributes = element.attributes;
    for (let i = 0; i < attributes.length; i++) {
      console.log(attributes[i].name + ': ' + attributes[i].value);
    }

  三、修改节点属性
  1. 设置属性：
    - 可以使用 `setAttribute()` 方法设置属性的值，或者直接通过点语法或方括号语法设置。
    element.setAttribute('data-custom', 'value'); // 使用setAttribute方法
    element.className = 'new-class'; // 使用点语法
  2. 移除属性：
    - 使用 `removeAttribute()` 方法可以移除指定的属性。
    element.removeAttribute('data-custom'); // 移除自定义属性

  四、常用属性
  1. 常用属性：
    -  `id` ：元素的唯一标识符。
    -  `className` ：元素的类名，可以通过 `classList` 属性进行更灵活的操作。
    -  `style` ：用于获取或设置元素的内联样式。
    element.id = 'newId'; // 设置id
    element.className = 'newClass'; // 设置类名
    element.style.color = 'red'; // 设置内联样式

  五、总结
  - DOM节点属性是与节点相关联的特性和信息，主要用于描述元素节点的状态和特征。
  - 可以通过 `getAttribute()` 、 `setAttribute()` 、 `removeAttribute()` 等方法访问和修改节点属性。
  - 常用属性包括 `id` 、 `className` 、 `style` 等。
   -->
</head>
<body>

  <!-- 注释 -->
  文本节点（TextNode）
  <div class="label-node">
    <h3 class="title">元素节点（Element Node）</h3>
    <p class="content">
      - DOM节点属性是与节点相关联的特性和信息，主要用于描述元素节点的状态和特征。
      - 可以通过 `getAttribute()` 、 `setAttribute()` 、 `removeAttribute()` 
        等方法访问和修改节点属性。
      - 常用属性包括 `id` 、 `className` 、 `style` 等。
    </p>
  </div>

  <script>

    // 1. 获取节点
    const bodyChildNodes = document.body.childNodes;
    const commentNode = bodyChildNodes[1];
    const textNode = bodyChildNodes[2];
    const divNode = bodyChildNodes[3];
    console.log("获取节点", commentNode, textNode, divNode);
    

    // 2. 节点类型
    console.log("节点类型", commentNode.nodeType, textNode.nodeType, divNode.nodeType);

    // 3. 节点名称
    console.log("节点名称", commentNode.nodeName, textNode.nodeName, divNode.nodeName);

    // 4. 节点值
    console.log("节点值", commentNode.nodeValue, textNode.nodeValue, divNode.nodeValue);

    // 5. 节点属性
    console.log("节点属性", commentNode.attributes, textNode.attributes, divNode.attributes);

    // 6. 节点关系
    console.log("节点关系", commentNode.parentNode, textNode.parentNode, divNode.parentNode);
    
    // 7. 节点操作
    // 创建节点
    const newTextNode = document.createTextNode("Hello World");
    // 添加节点
    divNode.appendChild(newTextNode);
    // 删除节点
    // divNode.removeChild(newTextNode);

    // 8. outerHTML
    console.log("outerHTML", divNode.outerHTML);
    
  </script>
  
</body>
</html>